// components/echarts/echarts.js
import * as echarts from '../../../components/ec-canvas/echarts';

//记得在这里全局声明一下
var seriesDataArr = [];
var timeArr = [];
var chart = null;

Page({
  data: {
    show: false,
    ec: {
      // 初始化图表
      onInit:  (canvas, width, height) => {
        //初始化echarts元素，绑定到全局变量，方便更改数据
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        return chart;
      }
    }
  },
  // 绘制图表
  runColumncCanva() {
    var option = {
      title: {
        // text: '次/分', 
        textStyle: {
            fontSize: 9,
            color: '#666666'
        }
    },
      color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
      legend: {
        data: ['高压（收缩压）','低压（收缩压）','心率'],
        icon: 'circle',
        left: 0,
        itemWidth: 9,
        // itemStyle: {
        //     color: '#5BBF70'
        // },
        // textStyle: {
        //     color: '#333333',
        //     fontSize: 13
        // }
    },
      grid: {
        left: '0%',
        right: '3%',
        bottom: 0,
        top: '15%',
        containLabel: true,
        show: true
    },
      
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: timeArr,
        axisLabel:{
          rotate:45,//倾斜度 -90 至 90 默认为0
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: seriesDataArr
    };
    //这里一定要做个charts是否存在的判断，因为万一ec那里没有初始化，这里就会报错
    if (chart) {
      chart.setOption(option);
      this.setData({
        show: true
      });
    }
  },
  getEchartData () {
    seriesDataArr = [{
      name: '高压（收缩压）',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: [-50,-18, 45, 65, 30, 78, 40, 0]
    },{
        name: '低压（收缩压）',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [-26, -12, 40, 56, 85, 65, 20, 10]
      },{
        name: '心率',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [-23, -11, 20, 16, 35, 25, 60, 14]
      }]
      timeArr = ['34°', '20°', '130°', '170°', '30°']
      this.runColumncCanva()
  },
  onReady() {
    // 模拟获取接口数据
    setTimeout(() => {
      this.getEchartData()
    }, 1000);
  }
});
